<template>
  <div class="app-container loginPage">
    <el-card class="box-card">
        <div class="targetWay">
          <div class="login card-name" :class="activeName === 'login' ? 'activeName' : ''"   @click="targetWay('login')">登录</div>
          <span>.</span>
          <div class="register card-name" :class="activeName === 'register' ? 'activeName' : ''" @click="targetWay('register')">注册</div>
        </div>
        <div class="page-body">
          <login-card v-if="activeName === 'login'"></login-card>
          <register  v-if="activeName === 'register'" @changeWay='targetWay' ></register>
        </div>
    </el-card>
    <canvas id="canvas" style="position: absolute;top: 0;left: 0;height:100vh;width:100vw"></canvas>
  </div>
</template>

<script>
import htmlCanvas from '../utils/htmlCanvas'
import Register from '@/components/UserLogin/register.vue'
import LoginCard from '../components/UserLogin/loginCard.vue'
export default {
  components: { Register, LoginCard },
  name: 'login',
  data () {
    return {
      activeName: 'login',
      ruleForm: {
        userName: '',
        password: ''
      },
      rules: {
        userName: { required: true, message: '请输入用户名称', trigger: 'blur' },
        password: { required: true, message: '请输入用户名称', trigger: 'blur' }
      },
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted () {
    htmlCanvas()
  },
  methods: {
    targetWay (val) {
      this.activeName = val
    }
  }
}
</script>

<style  lang="scss" scoped>
.loginPage{
  background: url('../assets/images/bg.jpg') center no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
}
.box-card{
  z-index: 3;
  width: 450px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10%;
  border-radius: .5rem;
	border: 1px solid rgba(0,180,220,0.5);
	background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));
	box-shadow:  0 0 1rem rgb(0,110,150);
  color:#fff;
  .clearfix{
    text-align: center;
    font-size: 18px;
  }
  .targetWay{
    display: flex;
    align-items: center;
    justify-content: center;
    .card-name{
      height: 40px;
      line-height: 40px;
      font-size: 24px;
      box-shadow: border-box;
      cursor: pointer;
      border-bottom: solid 2px rgba($color: #000000, $alpha: 0);
    }
    span{
      margin: 0 10px;
      width: 5px;
      height: 5px;
      background: #fff;
      border-radius: 50%;
    }
    .card-name:hover{
      border-bottom: 2px solid $blue;
    }
    .activeName{
      font-weight: 700;
      color: $blue;
      border-bottom: 2px solid $blue;
    }
  }
}
</style>
